<template>
    <div>
     <mt-header title="编辑资料" style=" background-color:white;color:#000">
      <mt-button icon='back' slot="left" @click="$router.go(-1)">返回</mt-button>
     </mt-header>

     <div class="tx">
      <van-uploader :after-read="afterRead" v-model="fileList" :preview-image='false'>
        <van-image round width="5rem" height="5rem" :src="user.headPortrait"/>
       <van-icon name="https://img1.baidu.com/it/u=3349242113,3078215819&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" size="30" class="tb"/>
      </van-uploader>
     </div>

      <van-field label="昵称~：" :placeholder="data.nickname" :value='data.nickname' v-model="nickname"/>
      <van-field label="手机号 ：" disabled :value='data.phone'/>
      <van-field label="邮箱 ：" :value="data.email" disabled />

     <van-radio-group v-model="radio" :value='data.sex'>
         <van-cell-group>
           <van-cell title=" 男" clickable @click="radio = '1'">
             <template #right-icon>
             <van-radio name="1" />
             </template>
        </van-cell>
        <van-cell title=" 女" clickable @click="radio = '0'">
            <template #right-icon>
            <van-radio name="0" />
            </template>
    </van-cell>
  </van-cell-group>
</van-radio-group>


     <van-field
  readonly
  clickable
  name="datetimePicker"
  v-model="birthday"
  label="时间选择"
  :placeholder="data.birthday"
  @click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
  <van-datetime-picker
    type="date"
    @confirm="onConfir"
    @cancel="showPicker = false"
  />
</van-popup>



     <van-field
  v-model="message"
  rows="2"
  autosize
  label="简介 :"
  type="textarea"
  maxlength="20"
  placeholder="有趣的简介可以吸引更多的粉丝哟~"
  show-word-limit
/>

      <van-field
       readonly
       clickable
       name="area"
      v-model='city'
      label="地区选择"
      :placeholder="data.city"
      @click="showArea = true"
     />
    <van-popup v-model="showArea" position="bottom">
    <van-area
    :area-list="areaList"
    @confirm="onConfirm"
    @cancel="showArea = false"
  />
</van-popup>

<van-button color="linear-gradient(to right, #ff6034, #ee0a24)" 
 size="large"  
 style="margin-top:15vw;" @click="Updata">
  保存修改
</van-button>
    </div>
</template>

<script>
 import { areaList } from '@vant/area-data';
 import { RadioGroup, Radio } from 'vant';
 import {mapState} from 'vuex'
 import { Toast } from 'vant';
    export default {
      computed: {
    ...mapState(['user'])
    },
  data() {
    return {
      nickname:'',
      birthday:'',
      message:'',
      radio:'1',
      city: '',
      showArea: false,
      areaList:areaList, // 数据格式见 Area 组件文档
      showPicker: false,
      fileList:[],
      data:'',
      imgs:'',
      showPicker: false,
    };
  },
  methods: {
    onConfir(date) {
      this.birthday = date.toLocaleDateString();
      this.showPicker = false;
    },
    onConfirm(values) {
      this.city = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.showArea = false;
    },
     afterRead(file,detail) {
      // 此时可以自行将文件上传至服务器
     let formData = new FormData()
     formData.append('file',file.file)
     this.axios.post('/upload/upload',formData).then((res) =>{
      console.log(res)
      if(res.data.code == 200 ){
        this.fileList.splice(0,res.data.data)
        window.sessionStorage.setItem('url',res.data.data)
        this.imgs = sessionStorage.getItem('url')
      }
     })
    },
   Details(){
      let url = '/user/findById/'+JSON.parse(sessionStorage.getItem('user')).id
      this.axios.get(url).then((res) => {
        //console.log(res.data.data)
        this.data = res.data.data
      })
   },
   Updata(){
    Toast.loading({ message: '加载中...', forbidClick: true,});
    let params  = `birthday=${this.birthday}&city=${this.city}&headPortrait=${sessionStorage.getItem('url')}
    &id=${JSON.parse(sessionStorage.getItem('user')).id}&nickname=${this.nickname}&sex=${this.radio}`
    let url = '/user/update'
    this.axios.post(url,params).then((res) => {
     // console.log(res)
      if(res.data.code == 200){
        Toast.success('修改成功');
        let url = '/user/findById/'+JSON.parse(sessionStorage.getItem('user')).id
        this.axios.get(url).then((res) => {
        console.log(res.data.data)
        window.sessionStorage.setItem('user',JSON.stringify(res.data.data))
      })
        this.$router.push('/personal')
      }
    })
   }
  },
  mounted () {
    this.Details()
   },
};

</script>

<style lang="scss" scoped>
.tx{
  position: relative;
  margin-left: 40%;
  .tb{
    position: absolute;
    bottom:0vw;
    right: 0.5%;
  }
}
</style>